import React from 'react';
import Logo from '../../components/logo/Logo';
import { WingBlank, List, InputItem, WhiteSpace, Radio, Button } from 'antd-mobile'
import styled from 'styled-components'
import { LoginWrapper, LoginTitle } from './style';
import axios from 'axios'
import qs from 'qs';

const RadioItem = Radio.RadioItem;

class Login extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            worker: true,
            username: '',
            password: ''
        }
        this.setStatusWorker = this.setStatusWorker.bind(this);
        this.setStatusBoss = this.setStatusBoss.bind(this);
        this.doLogin = this.doLogin.bind(this);
        this.toRegister = this.toRegister.bind(this);
        this.handleUserNameChange = this.handleUserNameChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
    }
    render () {
        return (
            <LoginWrapper>
                <Logo></Logo>
                <WingBlank size={'lg'}>
                    <LoginTitle>登录到招聘网站</LoginTitle>
                    <List>
                        <InputItem
                            clear
                            placeholder="登录用户名"
                            value={this.state.username}
                            onChange={this.handleUserNameChange}
                        >用户名</InputItem>
                        <InputItem
                            clear
                            placeholder="登录密码"
                            type={'password'}
                            value={this.state.password}
                            onChange={this.handlePasswordChange}
                        >密码</InputItem>
                        <WhiteSpace size={'lg'}></WhiteSpace>
                        <RadioItem checked={this.state.worker} onChange={this.setStatusWorker} >我是应聘者</RadioItem>
                        <RadioItem checked={!this.state.worker}  onChange={this.setStatusBoss} >我是招聘者</RadioItem>
                        <WhiteSpace size={'lg'}></WhiteSpace>
                        <WhiteSpace size={'lg'}></WhiteSpace>
                        <WhiteSpace size={'lg'}></WhiteSpace>
                        <Button type={'primary'} style={{backgroundColor: '#00b38a'}} onClick={this.doLogin}>登录</Button>
                        <WhiteSpace size={'lg'}></WhiteSpace>
                        <Button style={{backgroundColor: '#f2f2f2', color: '#999'}} onClick={this.toRegister}>还没账号？去注册</Button>
                    </List>
                </WingBlank>
            </LoginWrapper>
        )
    }
    setStatusWorker () {
        this.setState({
            worker: true
        })
    }
    setStatusBoss () {
        this.setState({
            worker: false
        })
    }
    handleUserNameChange (value) {
        this.setState({
            username: value
        })
    }
    handlePasswordChange (value) {
        this.setState({
            password: value
        })
    }
    doLogin () {
        axios.post('/user/data', qs.stringify({
            username: this.state.username,
            password: this.state.password
        })).then(({data}) => {
            if (data.code === 1) {
                alert('登录失败')
            }
        })
    }
    toRegister () {
        this.props.history.push('/register');
    }
}

export default Login